<!--
  病案借阅的全局搜索框
-->
<script>
export default {
  name: "TermSearchCard",
}
</script>
<script setup>

import {computed, inject, onBeforeUnmount, onMounted, provide, ref, watch} from "vue";
import pubsub from 'pubsub-js'
//定义
//TODO:数据真实性处理
const leveOptions = ref([
      {lable:'待审核',value:'0'},
      {lable:'已审核',value:'1'},
    ]
)
//cardSearch:搜索卡片
const cardSearch = ref({
  estimateBorrower:'',//归还日期
  estimateRestitution:''//借阅日期
})
//cardSearchTransfer:传输搜索卡片
const cardSearchTransfer = ref({})
//dataPicker:起始时间，结束时间
const dataPicker = ref([])
//fieldsStatic:处理组件传输过来的静态字段
const fieldsStatic  = inject("cardSearchField")
//fieldsValue:处理组件传输过来的静态value值
const valueStatic  = inject("cardSearchValue")

//方法
//formatDate:日期格式化函数
const formatDate = (date)=> {
  // 检查 date 是否为有效日期
  if (!date || !date.getFullYear) {
    return '';
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
//重置搜框:resetSearch
const resetSearch = ()=>{
  cardSearch.value={}
}
//search:发起查询搜索框查询信息的请求
const search = ()=>{
  cardSearchTransfer.value = cardSearch.value
}


//countStaticField:计算并展示静态字段
const countStaticField= (target,value)=>{
  let fields = ref('')
  // console.log("我是父组件",target,value)
  target.forEach((item)=>{
     for(const key in item){
       if(key === value){
        // console.log("我是子组件",item[key])
         fields = item[key]
         return
      }
    }
  })
  return fields

}

//监视器
//监视：dataPicker输入日期的变化
watch(dataPicker,(newValue)=>{
  cardSearch.value.startTime=formatDate(newValue[0])
  cardSearch.value.endTime=formatDate(newValue[1])
},{immediate:true})
//监视:cardSearchTransfer搜索框的内容变化
watch(cardSearchTransfer,(newValue)=>{
  pubsub.publish('cardSearchTransfer',cardSearchTransfer.value)
},{immediate:true})

// watch(num,(newValue)=>{
//
// },{immediate:true})

</script>
<template>
  <el-card style="margin: 20px; height: 120px; ">
    <el-form label-width="120px" label-position="right">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item :label="countStaticField(fieldsStatic,'borrowerName')">
            <el-input  placeholder="请输入" v-model="cardSearch.borrowerName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="countStaticField(fieldsStatic,'medicalRecord')" >
            <el-input  placeholder="请输入" v-model="cardSearch.medicalRecord"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="countStaticField(fieldsStatic,'hospitaLization')">
            <el-input  placeholder="请输入" v-model="cardSearch.hospitaLization"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item :label="countStaticField(fieldsStatic,'medicalRecordStatus')">
            <!--            TODO:修改变量名称-->
            <el-select  :clearable="true"  placeholder="请选择" v-model="cardSearch.medicalRecordStatus" >
              <el-option v-for="item in countStaticField(valueStatic ,'medicalRecordStatus')" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="countStaticField(fieldsStatic,'dataPicker')">
            <el-date-picker
                v-model="dataPicker"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </el-card>
</template>


<style scoped>

</style>